<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html">

<ui:composition template="/template.xhtml">
   <ui:define name="page.title">
      #{msg['search.title']}
      
      <a class="cart-link" href="cart.jsf">#{msg['order.cart']}</a>
   </ui:define>
   
   <ui:define name="page.content">
      <h:outputStylesheet library="css" 
         name="ui-lightness/jquery-ui-1.8.21.custom.css" />
      <h:outputScript library="js" 
         name="jquery-ui-1.8.21.custom.min.js" />
      <h:outputScript name="jquery.dataTables.js" library="js" />
      <h:outputScript name="jquery.json-2.3.js" library="js" />
      <h:outputScript name="search.js" library="js" />
      
      <input type="text" id="input-search"/> 
      <button>#{msg['crud.search']}</button>
      
      <div id="dialog-message" title="Adicionando ao carrinho"
         style="display: none; font-size: 13px;">
         <p>
            <span id="selected-product"></span><br/>
            Você deseja adicionar este item ao carrinho?
         </p>
      </div>

      <div id="confirm-message" title="Adicionando ao carrinho"
         style="display: none; font-size: 13px;">
         <p>
            <span id="msg-content" style="font-size: 13px;"></span><br/>
         </p>
      </div>
      
      <div id="datagrid">
         <table cellpadding="0" cellspacing="0" 
            border="0" class="display" id="productGrid">
            
            <thead>
               <tr>
                  <th width="60%">
                     #{msg['product.register.label.name']}
                  </th>
                  <th width="20%">
                     #{msg['product.register.label.model']}
                  </th>
                  <th width="10%">
                     #{msg['product.register.label.stock']}
                  </th>
                  <th width="10%">
                     #{msg['product.register.label.price']}
                  </th>
               </tr>
            </thead>
            
            <tbody class="ui-datatable-data ui-widget-content" />
            
            <tfoot>
               <tr>
                  <th width="60%">
                     #{msg['product.register.label.name']}
                  </th>
                  <th width="20%">
                     #{msg['product.register.label.model']}
                  </th>
                  <th width="10%">
                     #{msg['product.register.label.stock']}
                  </th>
                  <th width="10%">
                     #{msg['product.register.label.price']}
                  </th>
               </tr>
            </tfoot>
            
         </table>
      </div>
      
   </ui:define>
</ui:composition>

</html>
